<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看专栏</title>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/ViewColumn.css">
    <link rel="shortcut icon" href="../static/imgs/cms.png" type="image/x-icon">
    <script src="../static/js/jQuery.js"></script>
    <script src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: #373636;color: white;font-weight: bold">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">提示！！!</h4>
            </div>
            <div class="modal-body"></div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--导航栏--->
<nav class="navbar navbar-default nav_bottom" style="position: fixed">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="font-weight: 900;font-size: 40px"><span style="color: #fc5531;">c</span>sdn</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav nav-title">
                <li><a href="#" style="font-weight: bold;color: #999999;font-size: 25px">查看专栏</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="user-head-icon">
                    <img src="" class="user-head" alt="">
                    <div class="drop-box" style="display: none;">
                        <div class="drop-nickname-box">
                            <div class="drop-nickname">
                            </div>
                            <div style="width: 100%;height: 2px">
                                <hr style="width: 100%;">
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--查看专栏-->
<div class="view-column-big-box">
    <div class="view-column-box">
         <!--侧边栏-->
        <div class="column-side-box">
              <div class="column-side">
                  <!--作者模块-->
                  <div class="article-author-box">
                      <!--标题-->
                      <div class="author-title-box">
                          <div class="author-title">
                              专栏作者
                          </div>
                          <div class="hr-line">
                          </div>
                      </div>
                      <!--作者头像-->
                      <div class="author-avatar-box">
                          <img src="" alt="" class="author-avatar">
                      </div>
                      <!--作者昵称-->
                      <div class="author-name-box">
                          作者昵称
                      </div>
                      <!--关系按钮-->
                      <div class="author-btn-box">
                          <button class="author-btn1" id="author-btn">
                              关注
                          </button>
                      </div>
                      <!--作者成就-->
                      <div class="author-success">
                          <div class="success-item-box">
                              <div class="blog_self_count">0</div>
                              <div class="success-item-info">原创</div>
                          </div>
                          <div class="success-item-box">
                              <div class="fans_count">0</div>
                              <div class="success-item-info">粉丝</div>
                          </div>
                          <div class="success-item-box">
                              <div class="support_count">0</div>
                              <div class="success-item-info">获赞</div>
                          </div>
                          <div class="success-item-box">
                              <div class="comment_count">0</div>
                              <div class="success-item-info">评论</div>
                          </div>
                          <div class="success-item-box">
                              <div class="collection_count">0</div>
                              <div class="success-item-info">收藏</div>
                          </div>
                      </div>
                  </div>
              </div>
        </div>
        <!--专栏部分-->
        <div class="column-info-box">
            <!--专栏信息-->
            <div class="column-base-info-box">
                <div class="column-name-box">
                      <div class="column-icon">
                          专栏
                      </div>
                    <div class="column-name">
                         专栏名
                    </div>
                </div>
                <div class="column-author-box">
                    <div class="column-author-name-title-box">
                        <div class="column-author-name-title">
                            作者：
                        </div>
                        <div class="column-author-name">
                            作者名
                        </div>
                    </div>
                    <div class="column-author-intro">
                        这个人很懒，什么都没留下
                    </div>
                </div>
            </div>
            <!--文章信息-->
           <div class="column-article-list">

           </div>
        </div>
    </div>
</div>
<script>
     let column_name;
     let author_id;
     let is_delete;
    $(function () {
        /*获取头像*/
        $(".user-head").attr("src",window.localStorage.getItem("avatar"));
        /*获取专栏名*/
        const href=decodeURI(window.location.href);//译码
        let hrefIndex=href.split('?column_name=');
        column_name=hrefIndex[1];
        $(".column-name").text(column_name);
        get_column_author();
        get_column_article();
    })

     /*展示博客*/
     function push_blog_list(data) {
          $(".column-article-list").append(`<div class="column-article-item"  blog_id=${data['id']}>
              <div class="column-article-title">
                  ${data['article_title']}
              </div>
              <div class="column-article-content">
                   ${data['content_text']}
              </div>
              <div class="column-success-box">
                  <div class="column-success-icon">
                      ${data['is_original']}
                  </div>
                  <div class="column-create-time">
                     ${data['create_time']}
                  </div>
                  <div class="column-success-support-box">
                      <div class="column-support">
                          ${data['support_count']}
                      </div>
                      <div class="column-support-title">
                          点赞
                      </div>
                  </div>
                  <div class="column-success-comment-box">
                      <div class="column-comment">
                          ${data['comment_count']}
                      </div>
                      <div class="column-comment-title">
                          评论
                      </div>
                  </div>
                  <div class="column-success-comment-box">
                      <div class="column-collection">
                          ${data['collection_count']}
                      </div>
                      <div class="column-comment-title">
                          收藏
                      </div>
                  </div>
              </div>
          </div>`);
     }
     /*监听滚动条*/
     $(window).scroll(function () {
         if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
               get_column_article();
         }
     })

     /*获取专栏中的文章*/
     function get_column_article() {
         if($(".column-article-item").length%6!==0)
         {
             return;
         }
         let page_number=($(".column-article-item").length/6);
         let url="http://localhost:8080/articleServlet?action=get_column_info_blog";
         axios({
             method:"GET",
             url:url,
             params:{
                 column_name:column_name,
                 page:page_number
             },
         }).then(function (res) {
                console.log(res);
             let data1=res['data']['data'];
             for(let i=0;i<data1.length;i++){
                 push_blog_list(data1[i]);
             }
             /*查看博客*/
             $(".column-article-item").click(function () {
                 window.open("ViewBlog.html?blog_id="+$(this).attr("blog_id"));
             })
         })
     }

     /*关注按钮*/
     $("#author-btn").click(function () {
         if(is_delete==="1"){
              modal("改用户已注销");
         }
         else if(author_id===window.localStorage.getItem("email"))
         {
                modal("不能关注自己");
         }else{
             if($(this).attr("class")==="author-btn1"){
                 modal("关注成功");
                 $(this).attr("class","author-btn2");
                 $(this).text("已关注");
                 $.post("http://localhost:8080/userServlet?action=concern",{following_id:author_id,email:window.localStorage.getItem("email")});
             }else{
                 modal("取关成功");
                 $(this).attr("class","author-btn1");
                 $(this).text("关注");
                 $.post("http://localhost:8080/userServlet?action=cancel_concern",{following_id:author_id,email:window.localStorage.getItem("email")});
             }
         }
     })
     
     /*获取专栏作者信息*/
     function get_column_author() {
         let url="http://localhost:8080/articleServlet?action=get_column_author";
         axios({
             method:"GET",
             url:url,
             params:{
                 column_name:column_name,
                 self_id:window.localStorage.getItem("email")
             },
         }).then(function (res) {
              console.log(res);
             let data = res['data'];
             author_id=data['data']['email'];
             $(".author-avatar").attr("src",data['data']['headpicture']);
             $(".author-name-box").text(data['data']['nickname']);
             $(".blog_self_count").text(data['data']['blog_count']);
             $(".fans_count").text(data['data']['fans_number']);
             $(".column-author-name").text(data['data']['nickname']);
             $(".column-author-intro").text(data['data']['intro']);
             $(".support_count").text(data['data']['support_number']);
             $(".comment_count").text(data['data']['comment_number']);
             $(".collection_count").text(data['data']['collection_number']);
             is_delete=data['data']['is_delete'];
             let is_following=data['data']['is_following'];
             if(is_following==="1")
             {
                 $("#author-btn").addClass("author-btn2");
                 $("#author-btn").text("已关注");
             }else{
                 $("#author-btn").addClass("author-btn1");
                 $("#author-btn").text("关注");
             }
         })
     }
     /*模态框函数*/
     function modal(content) {
         $('.modal-body').html(content);
         $("#myModal").modal("show");
     }
</script>
</body>
</html>